<template>
  <div class="app-container">
    <el-button @click="gettemplatelistcilck">点击获取代码模板列表</el-button>
    <el-button @click="uploadCodecilck">点击上传代码</el-button>
    <el-button @click="getQrcodecilck">点击获取体验版二维码</el-button>
    <el-button @click="submitAuditclick">点击提交审核</el-button>
    <el-button @click="ecryptMsgclick">点击获取所有可设置的类目</el-button>


    <el-dialog :title="Audittitle" :visible.sync="Auditopen" width="900px" append-to-body>
      <el-form ref="Auditform" :model="Auditform"  label-width="80px">
        <el-row>
          <el-col :span="8" >
            <el-form-item label="预览信息" prop="previewInfo">
              <el-input v-model="Auditform.previewInfo" placeholder="请输入预览信息"/>
            </el-form-item>
          </el-col>

          <el-col :span="8" >
            <el-form-item label="小程序版本说明" prop="versionDesc">
              <el-input v-model="Auditform.versionDesc" placeholder="请输入小程序版本说明"/>
            </el-form-item>
          </el-col>

          <el-col :span="8" >
            <el-form-item label="反馈内容" prop="feedbackInfo">
              <el-input v-model="Auditform.feedbackInfo" placeholder="请输入反馈内容"/>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="8" >
            <el-form-item label="media_id 列表" prop="feedbackStuff">
              <el-input v-model="Auditform.feedbackStuff" placeholder="请输入media_id 列表"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="AuditsubmitForm">确 定</el-button>
        <el-button @click="Auditcancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form"  label-width="80px">
        <el-row>
          <el-col :span="8" >
            <el-form-item label="模板类型" prop="templateType">
              <el-input v-model="form.templateType" placeholder="请输入模板类型"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="unbindtitle" :visible.sync="unbindopen" width="900px" append-to-body>
      <el-form ref="unbinform" :model="unbinform"  label-width="80px">
        <el-row>
          <el-col :span="8" >
            <el-form-item label="模板id" prop="templateId">
              <el-input v-model="unbinform.templateId" placeholder="请输入模板id"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" >
            <el-form-item label="模板类型" prop="templateId">
              <el-input v-model="unbinform.templateType" placeholder="请输入模板类型"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" >
            <el-form-item label="代码版本号" prop="userVersion">
              <el-input v-model="unbinform.userVersion" placeholder="代码版本号"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" >
            <el-form-item label="代码描述" prop="userDesc">
              <el-input v-model="unbinform.userDesc" placeholder="代码描述"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="unbindsubmitForm">确 定</el-button>
        <el-button @click="unbindcancel">取 消</el-button>
      </div>
    </el-dialog>
    <img :src="'data:image/png;base64,'+this.imgsrc" alt="图片未上传" />
  </div>
</template>

<script>
import {gettemplatelistRequest,uploadCodeRequest,getQrcodeRequest,submitAuditRequest,ecryptMsgRequest,getallcategoriesRequest} from "@/api/applet/authorization";

export default {
  name: "Info",
  components: {

  },
  data() {
    return {
      Audittitle:"",
      unbindtitle:"",
      unbindopen:false,
      Auditopen:false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      unbinform:{},
      Auditform:{},
      imgsrc:null,
    };
  },
  created() {

  },
  methods: {
    ecryptMsgclick(){
      getallcategoriesRequest().then(response => {
        console.log("可设置的类目"+response);
      })
    },
    //
    gettemplatelistcilck(){
      this.title ="获取代码模板列表"
      this.open = true;
    },
    submitAuditclick(){
      this.Audittitle = "提交审核"
      this.Auditopen = true;
    },
    uploadCodecilck(){
      this.title ="上传代码"
      this.unbindopen = true;
    },
    getQrcodecilck(){
      getQrcodeRequest().then(response => {
        // console.log("获取体验版二维码成功"+response)
        this.imgsrc = response;
        console.log("base64=>"+this.imgsrc);
      })
    },
    /** 提交按钮 */
    AuditsubmitForm() {
      this.$refs["Auditform"].validate(valid => {
        console.log(this.Auditform)
        submitAuditRequest(this.Auditform).then(response => {
          console.log("审核成功"+response)
        })
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        console.log(this.form)
        gettemplatelistRequest(this.form).then(response => {
          console.log("获取模板列表成功"+response)
        })
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 提交按钮 */
    unbindsubmitForm() {
      this.$refs["unbinform"].validate(valid => {
        console.log(this.unbinform)
        let templateType = new Object();
        templateType.templateId = this.unbinform.templateId;
        templateType.userVersion = this.unbinform.userVersion;
        templateType.userDesc = this.unbinform.userDesc;
        uploadCodeRequest(this.unbinform).then(response => {
          console.log("上传代码成功"+response)
        })
      });
    },
    // 取消按钮
    unbindcancel() {
      this.unbindopen = false;
    },
    // 取消按钮
    Auditcancel() {
      this.Auditopen = false;
    }

  }
};
</script>
